<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" type="text/css" href="http://fonts.useso.com/css?family=Open+Sans">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :before,
        :after {
            content: '';
            display: block;
            position: absolute;
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
        }

        body {
            font-family: 'Asap', Arial, Helvetica, sans-serif;
            color: white;
            background: black url(img/rbXN40X.jpg) no-repeat 50% 0px;
            margin: 3% 10% 0 10%;
            overflow: auto;
        }

        #content {
            width: 800px;
            height: 844px;
            display: block;
            margin: 10px auto 0;
            position: relative;
        }

        #title {
            position: absolute;
            right: 0;
            right: 10px;
            top: 10px;
        }

        #title p.down {
            font-family: Open Sans;
            font-style: italic;
            color: #fc0;
            font-size: 50px;
            text-transform: uppercase;
            padding: 0 0 0 0;
            margin: 0 0 0 0;
            line-height: 60px;
        }

        #title p.working {
            font-family: Open Sans;
            font-style: italic;
            color: #fcfcfc;
            font-size: 24px;
            text-transform: uppercase;
            padding: 0 0 0 0;
            margin: 0 0 0 0;
        }

        .error-maintenancepage {
            height: 800px;
        }

        .body-maintenance,
        .head-maintenance,
        .eyes-maintenance,
        .leftarm-maintenance,
        .rightarm-maintenance,
        .chair-maintenance,
        .leftshoe-maintenance,
        .rightshoe-maintenance,
        .legs-maintenance,
        .laptop-maintenance {
            background: url(img/404-character-new.png) 0 0 no-repeat;
            width: 200px;
            height: 200px;
        }

        .newcharacter-maintenance,
        .torso-maintenance,
        .body-maintenance,
        .head-maintenance,
        .eyes-maintenance,
        .leftarm-maintenance,
        .rightarm-maintenance,
        .chair-maintenance,
        .leftshoe-maintenance,
        .rightshoe-maintenance,
        .legs-maintenance,
        .laptop-maintenance {
            background-size: 750px;
            position: absolute;
            display: block;
        }

        .newcharacter-maintenance {
            width: 400px;
            height: 800px;
            left: 200px;
            top: 0;
            margin-left: -200px;
        }

        .torso-maintenance {
            position: absolute;
            display: block;
            top: 138px;
            left: 0px;
            width: 389px;
            height: 252px;
            animation: sway 20s ease infinite;
            transform-origin: 50% 100%;
        }

        .body-maintenance {
            position: absolute;
            display: block;
            top: 0px;
            left: 0px;
            width: 389px;
            height: 253px;
        }

        .head-maintenance {
            position: absolute;
            top: -148px;
            left: 106px;
            width: 160px;
            height: 194px;
            background-position: 0px -265px;
            transform-origin: 50% 85%;
            animation: headTilt 9s ease infinite;
        }

        .eyes-maintenance {
            position: absolute;
            top: 92px;
            left: 34px;
            width: 73px;
            height: 18px;
            background-position: -162px -350px;
            animation: blink-maintenance 5s steps(1) infinite, pan 5s ease-in-out infinite;
        }

        .leftarm-maintenance {
            position: absolute;
            top: 159px;
            left: 0;
            width: 165px;
            height: 73px;
            background-position: -265px -341px;
            transform-origin: 9% 35%;
            transform: rotateZ(0deg);
            animation: typeLeft 0.4s linear infinite;
        }

        .rightarm-maintenance {
            position: absolute;
            top: 148px;
            left: 231px;
            width: 157px;
            height: 91px;
            background-position: -442px -323px;
            transform-origin: 90% 25%;
            animation: typeLeft 0.4s linear infinite;
        }

        .chair-maintenance {
            position: absolute;
            top: 430px;
            left: 55px;
            width: 260px;
            height: 365px;
            background-position: -12px -697px;
        }

        .legs-maintenance {
            position: absolute;
            top: 378px;
            left: 4px;
            width: 370px;
            height: 247px;
            background-position: -381px -443px;
        }

        .leftshoe-maintenance {
            position: absolute;
            top: 591px;
            left: 54px;
            width: 130px;
            height: 92px;
            background-position: -315px -749px;
        }

        .rightshoe-maintenance {
            position: absolute;
            top: 594px;
            left: 187px;
            width: 135px;
            height: 81px;
            background-position: -453px -749px;
            transform-origin: 35% 12%;
            animation: tapRight 0.6s linear infinite;
        }

        .laptop-maintenance {
            position: absolute;
            top: 186px;
            left: 9px;
            width: 365px;
            height: 216px;
            background-position: -2px -466px;
            transform-origin: 50% 100%;
            animation: tapWobble 0.3s linear infinite;
        }

        @keyframes sway {
            0% {
                transform: rotateZ(0deg);
            }
            20% {
                transform: rotateZ(0deg);
            }
            25% {
                transform: rotateZ(4deg);
            }
            45% {
                transform: rotateZ(4deg);
            }
            50% {
                transform: rotateZ(0deg);
            }
            70% {
                transform: rotateZ(0deg);
            }
            75% {
                transform: rotateZ(-4deg);
            }
            90% {
                transform: rotateZ(-4deg);
            }
            100% {
                transform: rotateZ(0deg);
            }
        }

        @keyframes headTilt {
            0% {
                transform: rotateZ(0deg);
            }
            20% {
                transform: rotateZ(0deg);
            }
            25% {
                transform: rotateZ(-8deg);
            }
            35% {
                transform: rotateZ(-8deg);
            }
            38% {
                transform: rotateZ(2deg);
            }
            42% {
                transform: rotateZ(2deg);
            }
            45% {
                transform: rotateZ(-8deg);
            }
            50% {
                transform: rotateZ(0deg);
            }
            70% {
                transform: rotateZ(0deg);
            }
            82% {
                transform: rotateZ(0deg);
            }
            85% {
                transform: rotateZ(8deg);
            }
            90% {
                transform: rotateZ(8deg);
            }
            100% {
                transform: rotateZ(0deg);
            }
        }

        @keyframes typeLeft {
            0% {
                transform: rotateZ(0deg);
            }
            25% {
                transform: rotateZ(7deg);
            }
            75% {
                transform: rotateZ(-6deg);
            }
            100% {
                transform: rotateZ(0deg);
            }
        }

        @keyframes typeRight {
            0% {
                transform: rotateZ(0deg);
            }
            25% {
                transform: rotateZ(-6deg);
            }
            75% {
                transform: rotateZ(7deg);
            }
            100% {
                transform: rotateZ(0deg);
            }
        }

        @keyframes tapWobble {
            0% {
                transform: rotateZ(-0.2deg);
            }
            50% {
                transform: rotateZ(0.2deg);
            }
            100% {
                transform: rotateZ(-0.2deg);
            }
        }

        @keyframes tapRight {
            0% {
                transform: rotateZ(0deg);
            }
            90% {
                transform: rotateZ(-6deg);
            }
            100% {
                transform: rotateZ(0deg);
            }
        }

        @keyframes blink-maintenance {
            0% {
                background-position: -162px -350px;
            }
            94% {
                background-position: -162px -350px;
            }
            98% {
                background-position: -162px -368px;
            }
            100% {
                background-position: -162px -350px;
            }
        }

        @keyframes pan {
            0% {
                transform: translateX(-2px);
            }
            49% {
                transform: translateX(-2px);
            }
            50% {
                transform: translateX(2px);
            }
            99% {
                transform: translateX(2px);
            }
            100% {
                transform: translateX(-2px);
            }
        }

        .info {
            z-index: 99999;
            position: fixed;
            top: 50%;
            left: 50%;
            margin: -100px -425px;
            padding: 50px;
            width: 850px;
            background-color: #fc0;
            color: #000;
        }

        pre {
            font-size: 1em;
            font-family: monospace;
            margin: 0;
            width: 350px;
            max-height: 650px;
            border-radius: 2px;
            background-color: #222;
            border: 1px solid #fc0;
            padding: 1em;
            color: #a6e22a;
            text-shadow: 1px 1px rgba(13, 12, 12, .4);
            overflow: hidden;
        }

    </style>

    <script src="../jquery.js"></script>
    <script>

        $(document).ready(function() {

            (function($) {
                $.fn.TypeByLetter = function(speed) {
                    return this.each(function() {

                        if (speed == undefined) {
                            speed = 100
                        }
                        var text = $(this).text().split("");
                        $(this).text("");
                        var $object = $(this);

                        function type(i) {
                            i = i || 0;
                            $object.append(text[i]);
                            if (i < text.length) {
                                setTimeout(function() {
                                    type(i)
                                }, speed);
                                i++;
                            }
                        }
                        type(0);
                    });
                };
            })(jQuery);

            $('pre.letterbyletter').TypeByLetter(50);
            $('p.letterbyletter').TypeByLetter();

            document.getElementById('player').volume = 0.1;
        });
    </script>

</head>
<body>

<div id="content">
    <div id="title">
        <p class="down">Down for
            <br/>maintenance</p>

        <p class="working letterbyletter">(we are working hard)</p>
        <pre class="letterbyletter">
            *{
              margin: 0;
              padding: 0;
              border: 0;
              outline: 0;
              box-sizing: border-box;
            }
            :before,:after{
              content: '';
              display: block;
              position: absolute;
              box-sizing: border-box;
            }
            html, body{
              height: 100%;
            }
            body{
              font-family: sans-serif;
              color: white;
              background: black url(http://i.imgur.com/rbXN40X.jpg) no-repeat 50% 0px;
              margin: 3% 10% 0 10%;
              overflow: hidden;
            }
            #content {
                width: 800px;
                height: 844px;
                display: block;
                margin: 10px auto 0;
                position: relative;
            }
        </pre>
        <br>
        <audio id="player" src="img/keyboard_sound.mp3" controls autoplay loop></audio>
    </div>
    <div class="error-maintenancepage">
        <div class="newcharacter-maintenance">
            <div class="chair-maintenance"></div>
            <div class="leftshoe-maintenance"></div>
            <div class="rightshoe-maintenance"></div>
            <div class="legs-maintenance"></div>
            <div class="torso-maintenance">
                <div class="body-maintenance"></div>
                <div class="leftarm-maintenance"></div>
                <div class="rightarm-maintenance"></div>
                <div class="head-maintenance">
                    <div class="eyes-maintenance"></div>
                </div>
            </div>
            <div class="laptop-maintenance"></div>
        </div>
    </div>
</div>
</body>
</html>


